<template>
    <div class="all">
        <wp-null-data-area
            class="no-data"
            :null-data-msg="$st('wp_No_data')"
            v-if="!tableData || tableData.length === 0"
            null-text-msg-color="rgba(0,0,0,0.6)"
        />
        <van-list
            v-else
            @load="onLoad"
            v-model:loading="loading"
            :finished="finished"
            :finished-text="$st('wp_No_more')"
            :immediate-check="false">
            <div class="list-box">
                <div
                    class="alarm-cell"
                    v-for="(item, index) in tableData"
                    :key="index">
                    <div class="alarm-info">{{item.value}}</div>
                    <div class="alarm-time">{{item.timestamp}}</div>
                </div>
            </div>
        </van-list>
    </div>
</template>
<script>
import { onMounted, reactive, toRefs, ref, watch } from 'vue';
import { deviceviewSetup } from '@/setup/deviceview/deviceviewSetup.js';
import moment from 'moment';

export default {
    props: {
        tempuuid: String
    },
    setup (props, ctx) {
        watch(() => props.tempuuid, (newData, OldData) => {
            uuid.value = props.tempuuid;
            getAlarmData();
        });
        const { getAlarmDataInfo } = deviceviewSetup();

        const state = reactive({
            tableData: [],
            allnum: 0,
            page: 1,
            pagesize: 15,
            finished: false,
            loading: false,
            refreshing: false
        });

        const uuid = ref('');

        // 获取报警信息
        const getAlarmData = () => {
            if (!uuid.value) {
                return;
            }
            if (state.page < 1) {
                return false;
            }
            const skip = (state.page - 1) * state.pagesize;
            getAlarmDataInfo({
                uuid: uuid.value,
                skip: skip,
                page_n: state.pagesize
            }).then((data) => {
                if (state.refreshing) {
                    state.tableData = [];
                }
                state.refreshing = false;
                state.loading = false;
                state.allnum = data.number;
                if (state.page * state.pagesize >= state.allnum) {
                    state.finished = true;
                }
                const arr = data.value.map((item) => {
                    item.timestamp = timeformat(item.timeStamp);
                    return item;
                });
                state.tableData = state.tableData.concat(arr);
            });
        };

        // 时间处理
        const timeformat = (time) => {
            return moment(time).format(
                'YYYY-MM-DD HH:mm:ss'
            );
        };

        // 上拉刷新
        const onRefresh = () => {
            state.tableData = [];
            state.refreshing = true;
            state.page = 1;
            state.finished = false;
            state.loading = false;
            getAlarmData();
        };

        // 滚动加载下一页数据
        const onLoad = () => {
            state.page++;
            getAlarmData();
        };

        onMounted(() => {
            console.log('挂载');
            getAlarmData();
        });

        return {
            ...toRefs(state),
            uuid,
            onRefresh,
            getAlarmData,
            onLoad
        };
    }
};
</script>
<style scoped lang="scss">
.all {
    background: white;
    overflow: scroll;
    height: calc(100vh - 372px);
}
.alarm-cell {
    background: #fbf4f4;
    border-radius: 3px;
    margin-bottom: 10px;
    padding: 10px;
    font-size: 13px;
    .alarm-info {
        overflow: hidden;
        text-overflow: ellipsis;
        color: #e64566;
        margin-bottom: 3px;
    }
    .alarm-time {
        color: rgba(0,0,0,0.60);
    }
}
.list-box {
    padding: 10px 15px 15px;
}
.no-data {
    font-size: 15px;
}
</style>
